<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight" style="height: 100%">
        <div class="row" style="height: 100%">
            <div class="col-sm-12" style="height: 100%">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>加盟版图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div style="height:600px" id="echarts-map-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
	    $(function () {
            debugger;
            //获取大区会长数据
            $.ajax({
                type: "post",
                url: ctx + "zsyh/agentinfo/listCount",
                success: function(data) {
                    debugger;
                    var agentData =data.rows[0];
                    var partData =data.rows[1];
                    var repairData =data.rows[2];
                    var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
                    var mapoption = {
                        title : {
                            text: '加盟版图',
                            subtext: '大区-配件店-维修师傅',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            x:'left',
                            data:['大区会长','配件店','维修师傅']
                        },
                        dataRange: {
                            min: 0,
                            max: 2500,
                            x: 'left',
                            y: 'bottom',
                            text:['高','低'],           // 文本，默认为数值文本
                            calculable : true
                        },
                        toolbox: {
                            show: true,
                            orient : 'vertical',
                            x: 'right',
                            y: 'center',
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        roamController: {
                            show: true,
                            x: 'right',
                            mapTypeControl: {
                                'china': true
                            }
                        },
                        series : [
                            {
                                name: '大区会长',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data: agentData,
                            },
                            {
                                name: '配件店',
                                type: 'map',
                                mapType: 'china',
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:partData,
                            },
                            {
                                name: '维修师傅',
                                type: 'map',
                                mapType: 'china',
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:repairData,
                            }
                        ]
                    };
                    mapChart.setOption(mapoption,{notMerge: true});
                    $(window).resize(mapChart.resize);
                }
            });
	    });
    </script>
</body>
</html>